<template>
  <div class="post">
    <div class="alert-top" v-if="off">
      <a-alert message="编辑的内容不符合规则" type="success" :banner="true" />
    </div>
    <b-container class="mt-3">
      <b-row>
        <h2 class="text-center">发布话题</h2>
        <b-col sm="6">
          <b-card class="mb-2 _card">
            <b-card-text>
              <b-form>
                <h3 class="text-center">操作栏</h3>
                <b-row class="align-items-center">
                  <b-col md="2" cols="2">
                    <label class="mr-sm-2" for="inline-form-custom-select-pref"
                      >标题</label
                    >
                  </b-col>
                  <b-col md="10" cols="10">
                    <b-form-input
                      id="input-1"
                      v-model="form.title"
                      required
                      placeholder="请输入标题"
                    ></b-form-input>
                  </b-col>
                </b-row>
                <b-row class="align-items-center mt-2">
                  <b-col md="2" cols="2">
                    <label class="mr-sm-2" for="inline-form-custom-select-pref"
                      >话题分类</label
                    >
                  </b-col>
                  <b-col md="10" cols="10">
                    <b-form-group>
                      <b-form-checkbox-group
                        v-model="selected"
                        :options="options"
                        buttons
                        button-variant="outline-secondary"
                        size="sm"
                        name="buttons-2"
                        class="_label"
                      ></b-form-checkbox-group>
                    </b-form-group>
                  </b-col>
                  <!-- {{ selected }} -->
                </b-row>
                <b-row class="align-items-center">
                  <b-col md="2">
                    <label class="mr-sm-2" for="inline-form-custom-select-pref"
                      >话题内容</label
                    >
                  </b-col>
                  <b-col md="10">
                    <textarea
                      v-model="form.body"
                      class="form-control"
                      id="exampleFormControlTextarea1"
                      rows="12"
                      placeholder="请输入内容"
                    ></textarea>
                  </b-col>
                </b-row>
                <b-row class="mt-2">
                  <b-col md="2">
                    <label class="mr-sm-2" for="inline-form-custom-select-pref"
                      >简介</label
                    >
                  </b-col>
                  <b-col md="10">
                    <textarea
                      v-model="form.outline"
                      class="form-control"
                      id="exampleFormControlTextarea2"
                      rows="2"
                      placeholder="请输入内容"
                    ></textarea>
                  </b-col>
                </b-row>
                <b-row class="align-items-center">
                  <b-col md="2">
                    <label class="mr-sm-2" for="inline-form-custom-select-pref"
                      >上传图片</label
                    >
                  </b-col>
                  <b-col class="d-flex">
                    <div class="file-box">
                      <input
                        class="file"
                        @change="Upload"
                        type="file"
                        accept="image/*"
                        ref="file"
                      />
                      <div>+</div>
                    </div>
                    <!-- <div class="img_box" >
                      <img id="img_box" ref="img_box" />
                    </div> -->
                  </b-col>
                </b-row>
                <b-row>
                  <b-button href="#" class="mt-2" variant="primary" @click="addActicle"
                    >发布内容</b-button
                  >
                </b-row>
              </b-form>
            </b-card-text>
          </b-card>
        </b-col>

        <b-col sm="6" class="mt-5">
          <b-card class="mb-2 _card">
            <b-card-text>
              <b-form>
                <b-row class="text-center">
                  <h2>预览效果</h2>
                </b-row>
                <b-row class="align-items-center">
                  <b-col md="2" cols="2">
                    <label class="mr-sm-2" for="inline-form-custom-select-pref"
                      >标题</label
                    >
                  </b-col>
                  <b-col md="10" cols="10">
                    <b-form-input
                      id="input-1"
                      v-model="form.title"
                      required
                      disabled
                      placeholder=""
                    ></b-form-input>
                  </b-col>
                </b-row>
                <b-row class="align-items-center mt-2">
                  <b-col md="2" cols="2">
                    <label class="mr-sm-2" for="inline-form-custom-select-pref"
                      >话题分类</label
                    >
                  </b-col>
                  <b-col md="10" cols="10">
                    <b-form-group>
                      <b-form-checkbox-group
                        v-model="selected"
                        :options="optionslist"
                        buttons
                        button-variant="outline-secondary"
                        size="sm"
                        name="buttons-2"
                        class="_label"
                        disabled
                      ></b-form-checkbox-group>
                    </b-form-group>
                  </b-col>
                  <!-- {{ selected }} -->
                  <!-- {{ optionslist }} -->
                </b-row>
                <b-row class="align-items-center">
                  <b-col md="2">
                    <label class="mr-sm-2" for="inline-form-custom-select-pref"
                      >话题内容</label
                    >
                  </b-col>
                  <b-col md="10">
                    <textarea
                      v-model="form.body"
                      class="form-control"
                      id="exampleFormControlTextarea1"
                      rows="12"
                      disabled
                    ></textarea>
                  </b-col>
                </b-row>
                <b-row class="mt-2">
                  <b-img
                    ref="img_box"
                    src="https://picsum.photos/600/200/?image=25"
                  ></b-img>
                </b-row>
              </b-form>
            </b-card-text>
          </b-card>
        </b-col>
      </b-row>
    </b-container>
  </div>
</template>

<script>
export default {
  name: "post",
  data() {
    return {
      form: { title: "", body: "", outline: "" },
      foods: [],
      options: [
        { text: "前端", value: "1" },
        { text: "后端", value: "2" },
        { text: "Node.js", value: "3" },
        { text: "PHP", value: "4" },
      ],
      selected: [], //选中的玩意 value
      imgurl: "",
      off: false,
      msg:"" //提示内容
    };
  },
  computed: {
    optionslist() {
      let list = [{ text: "Orange", value: "1" }];
      if (this.selected.length >= 2) {
        list = [];
        this.selected.forEach((item) => {
          list.push(this.options[Number(item) - 1]);
        });
      }
      return list;
    },
  },
  methods: {
    async addActicle() {
      let data = {
        title: this.form.title,
        body: this.form.body,
        outline: this.form.body,
        cid: this.selected,
        imgUrl: this.imgurl,
      };
      let res = await this.$article.addarticle(data);
      console.log(res);
      if (res.data.ret == 200) {
        // this.off = true;
        setTimeout(() => {
          this.$router.push("/");
        }, 2000);
      } else {
        this.off = true;
        this.msg=res.data.msg
        setTimeout(() => {  
          this.off = false;
        }, 3000);
      }
    },
    async Upload(e) {
      let formData = new FormData();
      formData.append("file", e.target.files[0]);
      let res = await this.$uploading.upload(formData); //图片上传
      this.imgurl = res.data.data.url;
    },
  },
  mounted() {
    let _this = this;
    // console.log(this.$refs["file"], this.$refs["img_box"]);
    this.$refs["file"].onchange = function () {
      var file = this.files[0];
      if (window.FileReader) {
        var fr = new FileReader();
        fr.readAsDataURL(file);
        fr.onload = function (e) {
          e;
          // console.log(e.target); // e.target返回FileReader对象,里面包含：事件，状态，属性，结果等
          // console.log(this); // 同e.target返回结果一样,两者等价
          // console.log(e.target.result); // 读取的结果，dataURL格式的
          _this.$refs["img_box"].src = this.result; // 图片可显示出来
          _this.$refs["img_box"].style.width = "626px";
          _this.$refs["img_box"].style.height = "200px";
        };
      } else {
        alert("暂不支持FileReader");
      }
    };
  },
};
</script>

<style lang="scss">
.post {
  ._label {
    flex-wrap: wrap;
    label {
      max-width: 100px;
      margin: 0px 10px 10px 0px;
    }
    input {
      display: none;
    }
  }
  .card-text {
    form {
      input {
        background: rgba(222, 222, 222, 0.3);
      }
      textarea {
        background: rgba(222, 222, 222, 0.3);
      }
    }
  }
  ._card {
    box-shadow: 0px 0px 5px #ffff;
    background: rgba(222, 222, 222, 0.5);
  }
  .file-box {
    margin-top: 10px;
    width: 160px;
    height: 160px;
    border: 1px dashed #898989;
    position: relative;
  }
  .file-box:hover {
    border: 1px dashed #72d1d4;
  }
  .file {
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
  }
  .file-box div {
    position: absolute;
    top: 40%;
    left: 45%;
    transform: scale(3);
    color: #898989;
  }
  .img_box {
    margin-top: 10px;
    width: 160px;
    height: 160px;
    padding: 5px;
    margin-left: 5px;
    border: 1px solid #5656;
  }
  .alert-top {
    width: 300px;
    position: absolute;
    top: 10px;
    left: 50%;
    z-index: 999;
  }
}
</style>
>
